<template>
    <div :id="item.creation_id" @click="showPop">
        <div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" class="position-relative cursor-pointer">
            <el-image :src="item.first_frame" :style="'height:'+(item.height)+'px;'" fit="cover" style="width: 100%;border-top-left-radius: 15px;border-top-right-radius: 15px;" v-if="item.first_frame" v-show="!video_play">
                <div class="image-slot" slot="placeholder"><img :src="require("@/assets/image/load-image.png")" fit="cover" style="width: 100%;border-top-left-radius: 15px;border-top-right-radius: 15px;" alt=""/></div>
            </el-image>

            <div :id="'player'+item.creation_id" :style="'height:'+(item.height)+'px;background:url('+item.first_frame+');background-size:100% 100%;'" style="width: 100% !important;border-top-left-radius: 15px;border-top-right-radius: 15px;" v-show="video_play"></div>
            <!-- <div :id="'dplayer'+item.creation_id" :style="'height:'+item.height+'px;'" style="width: 100%;border-top-left-radius: 15px;border-top-right-radius: 15px;" v-show="video_play"></div> -->
            <div class="like-and-time" v-if="!item.ad_info" v-show="!video_play">
                <div class="flex align-center jus-between pd-10">
                    <div class="color-fff flex align-center">
                        <el-image :src="require('@/assets/icon/creation/like_invalid.png')" fit="cover" style="width: 18px;height:18px;"></el-image>
                        <span class="font-14 pl-2">{{item.like_count | formatNumber}}</span>
                    </div>
                    <div class="font-13 radius-5 color-fff pd-8 pt-1 pb-1" style="background:#2a2626">{{item.media_duration | formatTime}}</div>
                </div>
            </div>
            <div class="like-and-time" style="margin-top:-38px" v-if="!item.ad_info" v-show="video_play">
                <div class="flex align-center jus-between color-fff pd-5 pl-8 pr-8">
                    <div class="flex align-center">
                        <i @click.stop="stopVideo" class="el-icon el-icon-video-pause cursor-pointer color-fff font-22" v-show="play"></i>
                        <i @click.stop="playVideo" class="el-icon el-icon-video-play cursor-pointer color-fff font-22" v-show="!play"></i>
                        <div class="pl-10 font-13">
                            <span>{{video.currentTime | formatTime}}</span>
                            <span>/</span>
                            <span>{{item.media_duration | formatTime}}</span>
                        </div>
                    </div>
                    <div>
                        <el-image :src="require('@/assets/icon/video/muted.png')" @click.stop="mute(false)" class="cursor-pointer" fit="fill" style="width: 28px;height:22px;" v-show="muted"></el-image>
                        <el-image :src="require('@/assets/icon/video/muted_invalid.png')" @click.stop="mute(true)" class="cursor-pointer" fit="fill" style="width: 28px;height:22px;" v-show="!muted"></el-image>
                    </div>
                </div>
                <div>
                    <div class="pb-6">
                        <el-progress :percentage="video.percentage" :show-text="false" color="#fff"></el-progress>
                    </div>
                </div>
            </div>
            <div class="position-absolute color-fff need-pay" v-if="item.need_pay">
                <span>付费视频</span>
                <span class="pl-5 color-yellow-light">{{item.fee}}{{$store.state.config.coin_name}}</span>
            </div>
            <div class="position-absolute color-fff need-pay" v-if="item.ad_info">
                <span>广告</span>
                <span @click.stop="openAd(item.ad_info.url)" class="pl-5 color-yellow-light">
                    跳转详情
                    <i class="el-icon-arrow-right"></i>
                </span>
            </div>
        </div>
        <div :style="video_play ? 'margin-top:-1px' : ''" class="pd-10 pt-5 pb-10 short-label cursor-pointer">
            <div :title="item.creation_name" class="color-fff font-14 text-line2 mt-5">{{item.creation_name}}</div>
            <div class="mt-4 flex align-center">
                <div @click.stop="toPath('/user-homepage?user_id=' + item.author.id)" class="flex align-center author-name">
                    <el-image :src="item.author.avatar" fit="cover" style="width: 20px;height: 20px;border-radius:100%;flex-shrink: 0"></el-image>
                    <span class="color-999 pl-6 font-13">{{item.author.name}}</span>
                </div>
                <div class="color-999 pl-6 font-13">{{item.created_at | getTimeAgo}}</div>
            </div>
        </div>
    </div>
</template>

<script>
import Player from 'xgplayer'
// import volume from 'xgplayer/dist/controls/volume';
// import playbackRate from 'xgplayer/dist/controls/playbackRate';
// import HlsJsPlayer from 'xgplayer-hls.js'
import { Events } from 'xgplayer'
import HlsPlayer from 'xgplayer-hls'
import 'xgplayer/dist/index.min.css'
import videoPercense from '@/components/video/percense.vue'
export default {
    components: {
        videoPercense,
    },
    props: {
        item: {
            type: Object,
            required: true,
        },
        muted: {
            type: Boolean,
            default: true,
        },
        index: {
            type: Number,
            default: 0,
        },
    },
    computed: {
        videoHeight() {
            return 'height:' + this.item.height + 'px !important;'
        },
    },
    data() {
        return {
            video_play: false,
            video: {
                currentTime: 0,
                duration: 0,
                percentage: 0,
            },
            play: false,
            allow_contr: false,
            player: null,
            process_visible: false,
        }
    },
    mounted() {
        this.allow_contr = true
    },
    methods: {
        showPop() {
            let value = this.item
            value.index = this.index
            // if (!this.item.ad_info) {
            this.$emit('showPop', value)
            // }
        },
        toPath(url) {
            this.$router.push(url)
        },
        showProcess() {
            this.process_visible = true
        },
        hideProcess() {
            this.process_visible = false
        },
        openAd(url) {
            window.open(url)
        },
        initPlayer() {
            if (this.item.m3u8_media != '') {
                this.player = new Player({
                    id: 'player' + this.item.creation_id,
                    url: this.item.m3u8_media,
                    autoplay: false,
                    loop: true,
                    fitVideoSize: 'auto',
                    // fluid: true,
                    height: this.item.height,
                    width: this.item.width,
                    plugins: [HlsPlayer],
                    videoInit: true,
                    ignores: ['time', 'definition', 'error', 'fullscreen', 'i18n', 'loading', 'mobile', 'pc', 'play', 'poster', 'replay', 'volume'],
                    poster: this.item.first_frame,
                    closeVideoClick: true,
                    closeFocusVideoFocus: true,
                    playbackRate: [],
                    controls: false,
                    marginControls: true,
                    cssFullscreen: false,
                    commonStyle: {
                        playedColor: '#ffffff',
                        cachedColor: 'transparent',
                        sliderBtnStyle: {
                            background: '#fff',
                        },
                    },
                })
            } else {
                this.player = new Player({
                    id: 'player' + this.item.creation_id,
                    url: this.item.media_urls[0],
                    autoplay: false,
                    loop: true,
                    fitVideoSize: 'auto',
                    height: this.item.height,
                    width: this.item.width,
                    videoInit: true,
                    ignores: ['time', 'definition', 'error', 'fullscreen', 'i18n', 'loading', 'mobile', 'pc', 'play', 'poster', 'replay', 'volume'],
                    poster: this.item.first_frame,
                    closeVideoClick: true,
                    closeFocusVideoFocus: true,
                    playbackRate: [],
                    controls: false,
                    marginControls: true,
                    cssFullscreen: false,
                    commonStyle: {
                        playedColor: '#ffffff',
                        cachedColor: 'transparent',
                        sliderBtnStyle: {
                            background: '#fff',
                        },
                    },
                })
            }
        },
        changeSeek(value) {
            let time = this.item.media_duration * (value / 100)
            this.player.seek(Math.round(time))
        },
        handleMouseEnter() {
            if (this.item.need_pay) {
                return false
            }
            this.initPlayer()
            this.player.muted = this.muted
            this.video_play = true

            this.$nextTick(() => {
                // this.player.muted = false
                this.player.play()
                let that = this
                this.player.on(Events.READY, () => {
                    that.$nextTick(() => {
                        let video = document.getElementById('player' + that.item.creation_id).querySelector('video')
                        video.addEventListener('timeupdate', that.watchVideo)
                    })
                })
                // this.$nextTick(() => {
                //     if (this.player.paused) {
                //         this.player.muted = true
                //         this.$nextTick(() => {
                //             this.player.play()
                //             this.$emit('muted', true)
                //         })
                //     }
                // })
                // this.player.on('canplay', () => {
                //     that.$nextTick(() => {
                //         let video = document.getElementById('player' + that.item.creation_id).querySelector('video')
                //         video.addEventListener('timeupdate', that.watchVideo)
                //     })
                // })
            })
            this.play = true
        },
        watchVideo() {
            try {
                let video = document.getElementById('player' + this.item.creation_id).querySelector('video')
                this.video.currentTime = video.currentTime
                let value = (video.currentTime / video.duration) * 100
                this.video.percentage = value > 100 ? 100 : value
                if (this.video.percentage + '' == 'NaN') {
                    this.video.percentage = 0
                }
            } catch {}
        },
        handleMouseLeave() {
            this.player.destroy()
            this.player = null
            this.video_play = false
            this.play = false
            let video = document.getElementById('player' + this.item.creation_id).querySelector('video')
            this.$nextTick(() => {
                video.removeEventListener('timeupdate', this.watchVideo)
            })
        },
        stopVideo() {
            this.play = false
            this.player.pause()
        },
        playVideo() {
            this.play = true
            this.player.play()
        },
        mute(status) {
            this.player.muted = status
            this.$emit('muted', status)
        },
    },
}
</script>

<style lang="scss" scoped>
.short-label {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background: #151225;
    margin-top: -5px;
}
.author-name {
    max-width: 65%;
    overflow: hidden;
    white-space: nowrap; /* 防止文字换行 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
}
.like-and-time {
    position: absolute;
    margin-top: -40px;
    width: 100%;
}
/deep/.el-progress-bar {
    padding-right: 1px;
}
/deep/.el-progress-bar__outer {
    height: 2px !important;
    background: #999 !important;
    border-radius: 0px !important;
}
/deep/.xgplayer-start,
/deep/.xgplayer-enter {
    display: none !important;
}
/deep/.xgplayer-progress {
    // top: 50px !important;
}
/deep/.xgplayer .xg-pos {
    left: 0;
    right: 0;
}
/deep/.xgplayer-progress-outer {
    height: 2px;
}
/deep/.xgplayer-progress-btn {
    height: 10px;
    width: 10px;
}
/deep/.xg-video-container {
    height: 100%;
}

.need-pay {
    padding: 5px 12px;
    border-radius: 22px;
    background: #060316b3;
    bottom: 8px;
    left: 5px;
    font-size: 10px;
}
</style>